<template>
	<view class="content">
		<view class="menuBox" ref="menuBox">
			<!-- <view class="menuItem" :class="menuIndex==index?'menuActive':''" v-for="(item,index) in menu" :key="index" @click="changeMenu(index)">
				{{item}}
			</view> -->
			<v-tabs v-model="current" :tabs="menu" @change="changeTab" fontSize="28rpx" activeColor="#000000"
				lineColor="#000000" paddingItem="30rpx"></v-tabs>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="getMore()" class="listBox"
			:style="{ height: listBoxHeight + 'px' }">
			<!-- 餐酒服务 预约状态 1已预约 2使用中 3已完成 4已取消-->
			<view class="listItem" v-for="(item,index) in data" :key="index">
				<view v-if="item.cat_name=='餐酒服务'"
					@click="$navto.navto('/pages/my_subscribe_dinner/my_subscribe_dinner', {id: item.id,status:item.status})">
					<view class="typeBox">
						<text class="typeLabel">餐酒服务</text>
						<text class="typeStatus">{{statusArr[item.status-1]}}</text>
					</view>
					<view class="orderBox">
						<view class="orderItem" v-for="(item1,index1) in item.dishes.slice(0, 4)" :key="index1">
							<image :src="item1.cover" class="orderPoster"></image>
							<text class="orderName ellipsis">{{item1.name}}</text>
						</view>
						<text class="orderDot" v-if="item.dishes.length>4">...</text>
					</view>
					<view class="deliveryBox" v-if="item.is_eat==1">
						<text class="deliveryType">堂食 - 立即就餐</text>
						<text class="deliveryLine">/</text>
						<text class="deliveryNum">就餐人数 ： {{item.people_num}} 人</text>
					</view>
					<view class="deliveryBox" v-else>
						<text class="deliveryType">配送</text>
						<text class="deliveryLine">/</text>
						<text class="deliveryNum">配送时间 ：{{item.sub_data}} {{item.sub_time}}</text>
					</view>
					<view class="priceBox">
						<text class="price">合计 ：￥{{item.amount}}</text>
						<view class="priceRight">
							<view class="cancle" v-if="item.status==1" @click.stop="cancel(item.id)">
								取消预约
							</view>
							<view class="cancle" v-if="item.status==3"
								@click.stop="$navto.navto('/pages/invoice/invoice', {id: item.id,is_order:2})">
								开发票
							</view>
							<view class="info" v-if="item.status==1 && item.is_eat==1 && item.pay_status==2">
								立即取餐
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==1">
								立即付款
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==2">
								查看详情
							</view>
						</view>
					</view>
				</view>
				<!-- 私宴预定 -->
				<view v-if="item.cat_name=='私宴预定'"
					@click="$navto.navto('/pages/my_subscribe_banquet/my_subscribe_banquet', {id: item.id,status:item.status})">
					<view class="typeBox">
						<text class="typeLabel">私宴预定</text>
						<text class="typeStatus">{{statusArr[item.status-1]}}</text>
					</view>
					<view class="addressBox">
						<image :src="item.venue.cover" class="addressPoster"></image>
						<text class="addressName ellipsis">{{item.venue.name}}</text>
						<text class="address ellipsis">地 址 ：{{item.venue.address}}</text>
						<text class="addressTime ellipsis">预约时间 ：{{item.sub_data}} / {{item.sub_time}}</text>
					</view>
					<text class="label">点菜信息</text>
					<view class="restaurantBox">
						<text class="restaurantItem">餐厅名称 ：{{item.dining_name}} </text>
						<text class="restaurantLine">/</text>
						<text class="restaurantItem">菜系 ：{{item.cuisine}}</text>
						<text class="restaurantLine">/</text>
						<text class="restaurantItem">餐标 ：￥{{item.standard}}</text>
					</view>
					<view class="priceBox">
						<text class="price">合计 ：￥{{item.amount}}</text>
						<view class="priceRight">
							<view class="cancle" v-if="item.status==1" @click.stop="cancel(item.id)">
								取消预约
							</view>
							<view class="cancle" v-if="item.status==3"
								@click.stop="$navto.navto('/pages/invoice/invoice', {id: item.id,is_order:2})">
								开发票
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==1">
								立即付款
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==2">
								查看详情
							</view>
						</view>
					</view>
				</view>
				<!-- 场地预约 -->
				<view v-if="item.cat_name=='场地预约'"
					@click="$navto.navto('/pages/my_subscribe_place/my_subscribe_place', {id: item.id,status:item.status})">
					<view class="typeBox">
						<text class="typeLabel">场地预约</text>
						<text class="typeStatus">{{statusArr[item.status-1]}}</text>
					</view>
					<view class="addressBox noBorder">
						<image :src="item.venue.cover" class="addressPoster"></image>
						<text class="addressName ellipsis">{{item.venue.name}}</text>
						<text class="address ellipsis">地 址 ：{{item.venue.address}}</text>
						<text class="addressTime ellipsis">预约时间 ：{{item.sub_data}} / {{item.sub_time}}</text>
					</view>
					<view class="priceBox">
						<text class="price">合计 ：￥{{item.amount}}</text>
						<view class="priceRight">
							<view class="cancle" v-if="item.status==1" @click.stop="cancel(item.id)">
								取消预约
							</view>
							<view class="cancle" v-if="item.status==3"
								@click.stop="$navto.navto('/pages/invoice/invoice', {id: item.id,is_order:2})">
								开发票
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==1">
								立即付款
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==2">
								查看详情
							</view>
						</view>
					</view>
				</view>
				<!-- 宠物预约 -->
				<view v-if="item.cat_name=='宠物空间'"
					@click="$navto.navto('/pages/my_subscribe_pet/my_subscribe_pet', {id: item.id,status:item.status})">
					<view class="typeBox">
						<text class="typeLabel">宠物空间</text>
						<text class="typeStatus">{{statusArr[item.status-1]}}</text>
					</view>
					<view class="addressBox noBorder">
						<image :src="item.venue.cover" class="addressPoster"></image>
						<text class="addressName ellipsis">{{item.venue.name}}</text>
						<text class="address ellipsis">地 址 ：{{item.venue.address}}</text>
						<text class="addressTime ellipsis">预约时间 ：{{item.sub_data}} / {{item.sub_time}}</text>
					</view>
					<view class="priceBox">
						<text class="price">合计 ：￥{{item.amount}}</text>
						<view class="priceRight">
							<view class="cancle" v-if="item.status==1" @click.stop="cancel(item.id)">
								取消预约
							</view>
							<view class="cancle" v-if="item.status==3"
								@click.stop="$navto.navto('/pages/invoice/invoice', {id: item.id,is_order:2})">
								开发票
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==1">
								立即付款
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==2">
								查看详情
							</view>
						</view>
					</view>
				</view>
				<!-- 我的活动 -->
				<view v-if="item.cat_name=='活动预约'"
					@click="$navto.navto('/pages/my_subscribe_activity/my_subscribe_activity', {id: item.id,status:item.status})">
					<view class="typeBox">
						<text class="typeLabel">活动预约</text>
						<text class="typeStatus">{{statusArr[item.status-1]}}</text>
					</view>
					<view class="addressBox noBorder">
						<image :src="item.activity.title_img" class="addressPoster"></image>
						<text class="addressName ellipsis">{{item.activity.name}}</text>
						<text class="address ellipsis">地 址 ：{{item.activity.address}}</text>
						<text class="addressTime ellipsis" v-if="item.activity">活动时间：{{$timestampToTime(item.activity.start_time)}}至{{$timestampToTime(item.activity.end_time)}}</text>
					</view>
					<view class="priceBox">
						<text class="price">合计 ：{{ item.amount > 0 ? '￥' + item.amount : '免费' }}</text>
						<view class="priceRight">
							<view class="cancle" v-if="item.status==1" @click.stop="cancel(item.id)">
								取消预约
							</view>
							<view class="cancle" v-if="item.status==3 && item.amount > 0"
								@click.stop="$navto.navto('/pages/invoice/invoice', {id: item.id,is_order:2})">
								开发票
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==1">
								立即付款
							</view>
							<view class="info" v-if="item.status==1 && item.pay_status==2">
								查看详情
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				current: 0,
				baseUrl: this.$baseUrl,
				menuIndex: 0,
				menu: ['全部', '已预约', '已完成', '已取消', '已过期'],
				listBoxHeight: 0, // 用于存储listBox的高度
				page: 1,
				statusArr: ['已预约', '使用中', '已完成', '已取消', '已过期'],
				status: 0, //预约状态 1已预约 2使用中 3已完成 4已取消 5已过期
				data: [],
				hasMore: true, // 默认有更多数据
			}
		},
		mounted() {
			this.calculateListBoxHeight();
		},
		onLoad(options) {
			this.current = options.current;
			this.status = options.status;
			this.data = [];
			this.page = 1;
			this.getData();
		},
		onShow() {
			const returnData = getApp().globalData.returnData || {};
			console.log(returnData);
			if (returnData.back == 1) {
				this.data = this.data.filter(item => item.id != returnData.id);
				getApp().globalData.returnData = null;
			}
			// this.data = [];
			// this.page = 1;
			// this.getData();
		},
		methods: {
			//取消
			cancel(id) {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该预约',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`user_cancel_sub?id=${id}`).then(res => {
								if (res.data.code == 10000) {
									this.$toast('取消成功');
									if (this.current === 0) {
										// 如果 current 等于 0，不删除数据，而是修改状态并隐藏取消按钮
										const item = this.data.find(item => item.id === id);
										if (item) {
											item.status = 4; // 将状态改为已取消
										}
									} else {
										// 如果 current 不等于 0，直接过滤掉该项
										this.data = this.data.filter(item => item.id !== id);
									}
								} else {
									this.$toast('取消失败');
								}
							}).catch(err => {
								console.error('取消请求失败', err);
								this.$toast('取消失败');
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getMore() {
				if (this.hasMore) {
					this.page++;
					this.getData();
				}
			},
			getData() {
				if (!this.hasMore) return; // 如果没有更多数据，直接返回
				this.$request.get(`sub_list?status=${this.status}&page=${this.page}`).then(res => {
					if (res.data.data && res.data.data.length > 0) {
						this.data.push(...res.data.data);
					} else {
						this.hasMore = false; // 没有更多数据了
						this.$toast('没有更多数据了');
					}
				}).catch(err => {
					console.error('请求失败', err);
				});
			},
			changeTab(index) {
				this.hasMore=true;
				this.data = [];
				this.page = 1;
				if (index > 1) {
					this.status = index + 1;
				} else {
					this.status = index;
				}
				this.getData();
				console.log('当前选中的项：' + index)
			},
			calculateListBoxHeight() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.menuBox').boundingClientRect(data => {
					if (data) {
						const windowHeight = uni.getWindowInfo().windowHeight;
						this.listBoxHeight = windowHeight - data.height - 15;
					}
				}).exec();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listBox {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.listItem {
			// height: 480rpx;
			border-radius: 6rpx;
			background: #ffffff;
			margin-bottom: 30rpx;
			padding: 35rpx 30rpx 40rpx 30rpx;
			position: relative;

			.restaurantBox {
				margin-top: 25rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.restaurantLine {
					font-weight: 500;
					font-size: 22rpx;
					color: #8E8E8E;
				}

				.restaurantItem {
					font-weight: 500;
					font-size: 22rpx;
					color: #121212;
				}
			}

			.label {
				font-weight: 700;
				font-size: 24rpx;
				color: #121212;
				margin-top: 35rpx;
				display: block;
			}

			.addressBox {
				padding-bottom: 25rpx;
				border-bottom: 1rpx dotted #ABABAB;
				margin-top: 35rpx;
				position: relative;

				.address {
					position: absolute;
					left: 210rpx;
					top: 55rpx;
					font-weight: 500;
					width: 420rpx;
					font-size: 21rpx;
					color: #121212;
				}

				.addressTime {
					position: absolute;
					left: 210rpx;
					top: 100rpx;
					font-weight: 500;
					width: 420rpx;
					font-size: 21rpx;
					color: #121212;

				}

				.addressName {
					position: absolute;
					left: 210rpx;
					top: 10rpx;
					font-weight: 700;
					width: 420rpx;
					font-size: 24rpx;
					color: #121212;
				}

				.addressPoster {
					width: 170rpx;
					height: 130rpx;
					border-radius: 10rpx;
				}
			}

			.priceBox {
				// position: absolute;
				width: 630rpx;
				// bottom: 40rpx;
				// padding-left: 30rpx;
				// padding-right: 30rpx;
				margin-top: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.priceRight {
					display: flex;

					.info {
						width: 130rpx;
						height: 54rpx;
						border-radius: 6rpx;
						background: #121212;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						letter-spacing: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 16rpx;
					}

					.cancle {
						width: 130rpx;
						height: 54rpx;
						border-radius: 6rpx;
						border: 1rpx solid #121212;
						font-weight: 500;
						font-size: 20rpx;
						color: #121212;
						letter-spacing: 5rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
					}
				}

				.price {
					color: #121212;
					font-weight: 700;
					font-size: 24rpx;
					letter-spacing: 5rpx;
				}
			}

			.deliveryBox {
				display: flex;
				margin-top: 50rpx;

				.deliveryLine {
					font-weight: 500;
					font-size: 22rpx;
					color: #8E8E8E;
					margin-left: 45rpx;
					margin-right: 45rpx;
				}

				.deliveryType,
				.deliveryNum {
					color: #121212;
					font-weight: 500;
					font-size: 22rpx;
					// letter-spacing: 4rpx;
				}
			}

			.orderBox {
				margin-top: 32rpx;
				padding-top: 0rpx 30rpx 0rpx 30rpx;
				display: flex;

				.orderDot {
					margin-left: 40rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #121212;
					letter-spacing: 6rpx;
					line-height: 112rpx;
				}

				.orderItem {
					width: 112rpx;
					display: flex;
					flex-direction: column;
					margin-right: 17rpx;

					.orderPoster {
						width: 112rpx;
						height: 112rpx;
						border-radius: 10rpx;
					}

					.orderName {
						font-weight: 500;
						width: 100%;
						font-size: 18rpx;
						text-align: center;
						color: #121212;
						margin-top: 22rpx;
					}
				}
			}

			.typeBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #d0d0d0;
				padding-bottom: 35rpx;

				.typeStatus {
					font-weight: 500;
					font-size: 24rpx;
					color: #121212;
					letter-spacing: 5rpx;
				}

				.typeLabel {
					font-weight: 700;
					font-size: 28rpx;
					color: #121212;
					letter-spacing: 5rpx;
				}
			}
		}
	}

	.menuBox {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding-top: 50rpx;

		.menuItem {
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 26rpx;
			color: #121212;
			padding-top: 45rpx;
			padding-bottom: 45rpx;
		}

		.menuActive {
			font-weight: 700;
			border-bottom: 1rpx solid #121212;
		}
	}

	.v-tabs__container-item {
		// font-size: 24rpx !important;
	}

	/deep/ .active {
		font-size: 30rpx !important;
		font-weight: 700 !important;
	}

	.v-tabs__container-line {
		height: 4rpx !important;
	}

	.v-tabs__container {
		background-color: #fff !important;
		height: 120rpx !important;
	}

	/deep/ .v-tabs__container-item {
		display: block !important;
	}

	/deep/ .v-tabs__container-line {
		height: 2rpx !important;
	}

	.content {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f0f0f0;
	}
</style>